<template>
    <a-form ref="formRef" :label-col='{span : 5}' :model="formData">
        <a-form-item style='display:none' name='id'>
            <a-input type='hidden' v-model:value='formData.id' />
        </a-form-item>
        <a-form-item label='设备类型' name='deviceTypeId' :rules="[{required : true, message : '请选择设备类型'}]">
            <a-tree-select show-search v-model:value='formData.deviceTypeId' :tree-data='deviceTypeOptions' :field-names='{children : "children", label : "name", value : "id"}'></a-tree-select>
        </a-form-item>
        <a-form-item label="所属商户" name="merchantId">
            <FetchSelect v-model="formData.merchantId" allowClear label-field="name" value-field="id" options-field="children" :fetch="queryMerchantApi" />
        </a-form-item>
        <a-form-item v-if="!formData.id" name='count'>
            <template #label>
                数量
                <a-tooltip>
                    <template #title>最少1，最多100</template>
                    <QuestionCircleOutlined class="m-l-5" />
                </a-tooltip>
            </template>
            <a-input-number :min="1" :max="100" v-model:value.number='formData.count' :precision="0" />
        </a-form-item>
        <a-form-item v-if="formData.id" label='阿里云设备密钥' name='aliSecret'>
            <a-input type='text' v-model:value='formData.aliSecret' :maxlength="35" show-count />
        </a-form-item>
        <a-form-item label='启用' name='enable'>
            <a-switch v-model:checked='formData.enable' checked-children='是' un-checked-children='否'/>
        </a-form-item>
        <a-form-item v-if="!formData.id" label='注册到阿里云' name='toAli'>
            <a-switch v-model:checked='formData.toAli' checked-children='是' un-checked-children='否'/>
        </a-form-item>
    </a-form>
</template>

<script lang="ts" setup>
import { deviceTypeOptionsApi } from '@/api/devices/DeviceType';
    import { saveApi } from '@/api/devices/Device';
import { queryMerchantApi } from '@/api/Merchant';
    import FetchSelect from '@/components/FetchSelect.vue'
import { filterEmptyParam, recursionFn } from '@/utils';
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
    import { ref } from 'vue';

    const props = defineProps<{
        row? : any
    }>()

    const formRef = ref()

    const deviceTypeOptions = ref<any[]>([])

    const formData = ref({
        id : 0,
        merchantId : '',
        deviceTypeId : '',
        enable : true,
        count : 1,
        toAli : true,
        aliSecret : ''
    })

    if(props.row) {
        for(let k in props.row) {
            if(props.row[k] !== null) {
                if(k in formData.value) {
                    if(k == 'merchantId') {
                        formData.value[k] = props.row[k] || ''
                    }else {
                        formData.value[k] = props.row[k]
                    }
                    
                }
            }
            
        }

    }



    async function submit() {
        let params  = await formRef.value.validate()
        if(params.merchantId === '') {
            params.merchantId = 0
        }
        const res = await saveApi(params)
        if(!params.id && params.count > 1 && params.toAli) {
            return new Promise((reslove, reject) => {
                setTimeout(() => {
                    reslove(res)
                }, 4000)
            })
        }else {
            return res
        }
        
        
    }

    defineExpose({
        submit
    })


    deviceTypeOptionsApi().then(r => {
        if(r.data) {
            deviceTypeOptions.value = recursionFn(r.data, 0, 'id', 'parentId', 'children')
        }
    })

</script>